<template>
  <div style="padding-top: 20px">
    <div style="width: 1200px;margin: 0 auto;">
      <div class="sort">
        <span>排序方式：</span>
        <el-radio-group
          v-model="sortOption"
          size="small"
          @change="handleSortChange"
        >
          <el-radio-button label="default">默认</el-radio-button>
          <el-radio-button label="price-asc">价格从低到高</el-radio-button>
          <el-radio-button label="price-desc">价格从高到低</el-radio-button>

        </el-radio-group>
      </div>
      <div class="query-field">
        <el-form
          :inline="true"
          :model="queryHomestay"
          class="query-form"
        >
          <div class="query-field-left">
            <el-form-item label="标题">
              <el-input
                v-model="queryHomestay.title"
                placeholder="请输入标题"
                clearable
              />
            </el-form-item>
            <el-form-item label="城市">
              <el-input
                v-model="queryHomestay.city"
                placeholder="请输入城市"
                clearable
              />
            </el-form-item>
            <el-form-item label="附近景点">
              <el-input
                v-model="queryHomestay.near"
                placeholder="请输入附近景点"
                clearable
              />
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model="queryHomestay.location"
                placeholder="请输入地址"
                clearable
              />
            </el-form-item>
          </div>
          <div class="query-field-right">
            <el-form-item>
              <el-button
                type="primary"
                @click="handleQuery"
              >查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="margin-top: 20px">
        <el-row :gutter="20">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="8"
            v-for="homestay in homestayList"
            :key="homestay.homestayId"
          >
            <el-card
              class="homestay-card"
              show="hover"
              @click.native="goToDetail(homestay.homestayId)"
            >
              <div
                class="card-image"
                :style="{backgroundImage: `url(${homestay.image})`}"
              >
                <div class="price-tag">￥{{ homestay.price }}<span>/晚</span>
                </div>
              </div>
              <div style="padding: 15px">
                <h3 class="homestay-title">{{ homestay.title }}</h3>
              </div>
              <div class="location">
                <i class="el-icon-location"></i>
                <span>{{ homestay.location }}</span>
              </div>
              <div class="tags">
                <el-tag
                  size="mini"
                  v-for="(tags,i) in homestay.homestayTagsList"
                  :key="i"
                >{{ tags.tag }}</el-tag>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 酒店详情 -->
    <RoomReservation ref="roomReservation" />
  </div>
</template>

<script>
import { selectHomestayOrTagsList } from "@/api/huacai/homestay";
import RoomReservation from "@/views/components/RoomReservation/index.vue";

export default {
  name: "homestay",
  components: { RoomReservation },
  data () {
    return {
      homestayList: [],//酒店列表
      sortOption: 'default',
      queryHomestay: {
        title: '',//标题
        city: '',//城市
        near: '',// 附近景点
        location: ''//地址
      }
    }
  },
  created () {
    this.getList();
  },
  methods: {
    getList () {
      selectHomestayOrTagsList(this.queryHomestay).then(res => {
        this.homestayList = res.data
        this.homestayList.forEach(item => {
          item.image = process.env.VUE_APP_BASE_API + item.image;
        })
        // 查询后保持当前排序状态
        if (this.sortOption !== 'default') {
          this.handleSortChange(this.sortOption);
        }
      })
    },
    // 查询
    handleQuery () {
      this.getList();
    },
    // 重置查询
    resetQuery () {
      this.queryHomestay = {
        title: '',
        city: '',
        near: '',
        location: ''
      };
      this.getList();
    },
    handleSortChange (val) {
      // console.log(val)
      switch (val) {
        case 'price-asc':
          this.homestayList.sort((a, b) => a.price - b.price);
          break;
        case 'price-desc':
          this.homestayList.sort((a, b) => b.price - a.price);
          break;
        default:
          this.getList();
      }
    },
    //打开酒店详情
    goToDetail (homestayId) {
      this.$refs.roomReservation.handleOpen(homestayId, '酒店ID');
      // console.log(homestayId,'酒店ID')

    }
  }
}
</script>

<style scoped lang="scss">
.query-form {
  display: flex;
  justify-content: space-between;
}
.homestay-card {
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

.homestay-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.price-tag {
  position: absolute;
  bottom: 10px;
  left: 20px;
  background-color: rgb(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 18px;
  font-weight: bold;
}

.price-tag span {
  font-size: 14px;
  font-weight: normal;
}

.homestay-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: bolder;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location {
  margin-top: 10px;
  font-size: 14px;
  color: #999;
  display: flex;
  align-items: center;
}

.location i {
  margin-right: 5px;
}

.tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tags .el-tag {
  margin-right: 5px;
}
.sort {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
.sort span {
  margin-right: 15px;
  font-size: 14px;
  color: #666;
}
</style>
